Add a clear search and filters action to the empty state#48
Conversation
|
Small UX follow-on: when a search or filter returns nothing, the empty state asks people to "broaden your search" but doesn't give them a way to do it. This adds a Clear search & filters button that resets to the default view and returns focus to the search box. I matched the existing pagination/control button styling (including |
mberman84
left a comment
mberman84
left a comment
There was a problem hiding this comment.
The reset behavior is correct in browser verification: it clears the query/category/page, restores the All chip's ARIA state, hides the empty state, and returns focus to search.
One deployment blocker remains: this changes both site/script.js and site/styles.css while pages still request the existing ?v=20260620-newest-first URLs. Cached visitors can receive the new button markup with old JavaScript/CSS, leaving the action inert or unstyled. Please bump the shared asset version across the homepage, Learn/Agents pages, generated loop pages, the page generator, and scripts/check.mjs, then regenerate affected pages.
|
Bumped both shared asset versions ( |
|
@mberman84 ready for re-review when convenient — both |
mberman84
left a comment
mberman84
left a comment
There was a problem hiding this comment.
Correction to my immediately preceding review, whose inline code formatting was stripped by the shell:
The previously requested script/CSS cache-bust is addressed, and the exact head passes node scripts/check.mjs, syntax checks, and all builders. The clear-filters behavior itself remains sound.
This branch now needs a rebase onto current main before it can be approved. Since this PR branched, #61/#62 moved loop detail pages to the database-backed proxy and removed scripts/build-loop-pages.mjs plus site/loops/**. GitHub reports this head as conflicting, and the stale generated-page edits must not restore files intentionally removed by the new architecture.
Please rebase onto the latest main, preserve the focused homepage markup/JS/CSS change, update only the surviving shared asset references/check assertions with a fresh version, and keep the removed generator/static loop pages deleted. Then rerun node scripts/check.mjs and the asset checks.
mberman84
force-pushed
the
feat/clear-filters-empty-state
branch
from
8a754b5 to
9a5d710
Compare
mberman84
left a comment
mberman84
left a comment
There was a problem hiding this comment.
Rebased onto the database-backed main architecture. The focused empty-state reset markup, behavior, and styling are preserved; stale generated-page artifacts are gone; and the full current CI-equivalent suite passes locally (41/41 Worker tests).
2 participants
Summary
When a search query or category filter matches no loops, the empty state reads:
…but offers no direct way to actually do that. The only ways back to the full catalog are manually clearing the search box or hunting for the All category chip — extra friction at exactly the dead-end moment.
This adds a Clear search & filters button to the empty state that:
is-active/aria-pressedstate),Changes
site/index.html— wrap the empty-state actions and add the reset button.site/script.js— wire the button to reset query + category and refocus search.site/styles.css— style the button to match the existing pagination/control buttons (including:focus-visible).Verification
node scripts/check.mjs→Loop Library checks passed.node --check site/script.jsbuild-skill-catalog,build-loop-pages,build-social-images) → no artifact drift.